<template>
  <view>
    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">申请记录</block>
    </cu-custom>

    <view class="wrap">
      <!-- 查询系列 -->
      <view class="u-flex u-row-center">
        <u-dropdown :close-on-click-mask="mask" ref="uDropdown" :activeColor="activeColor" :borderBottom="false">
          <u-dropdown-item @change="change" title="审批结果" v-model="result" :options="results"></u-dropdown-item>
        </u-dropdown>
      </view>

      <!-- 查询记录列表 -->
      <scroll-view scroll-y class="sv" :style="{ height: navHeight + 'px' }" @scrolltolower="reachBottom">
        <view class="page-box">
          <u-swipe-action v-for="(item, index) in dataList" :key="item.id" :index="index" :options="options" @click="click">
            <view class="order u-border-bottom">
              <view class="order-item">
                <view class="left title-wrap">
                  <view class="title">{{ item.createTime }}</view>

                  <view class="content">
                    <view v-if="item.result == 0" class="gray-type">审批结果: 未审批</view>
                    <view v-if="item.result == 1" class="green-type">审批结果: 通过</view>
                    <view v-if="item.result == 2" class="red-type">审批结果: 不通过</view>
                    <view class="other-type">申请内容: {{ item.content }}</view>
                    <view v-if="item.parentRoleName" class="type">审批人: {{ item.parentRoleName }}</view>
                    <view v-if="item.remark" class="other-type">审批评论: {{ item.remark }}</view>
                    <view v-if="item.result != 0" class="other-type">审批时间: {{ item.updateTime }}</view>
                  </view>
                </view>
              </view>
            </view>
          </u-swipe-action>
          <u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
        </view>
      </scroll-view>
    </view>

    <!-- 确认删除框 -->
    <Confirm ref="Confirm"></Confirm>
  </view>
</template>

<script>
import Confirm from '@/components/confirm.vue'

export default {
  data() {
    return {
      current: 1,
      size: 20,
      dataList: [],
      loadStatus: 'loadmore',
      activeColor: '#19be6b',
      mask: true,
      pH: 0, //窗口高度
      navHeight: 0, //元素的所需高度
      result: null,
      results: [
        {
          label: '全部',
          value: null
        },
        {
          label: '未审批',
          value: 0
        },
        {
          label: '通过',
          value: 1
        },
        {
          label: '不通过',
          value: 2
        }
      ],
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        }
      ]
    }
  },
  components: {
    Confirm
  },
  onShow() {},
  onLoad() {
    // 初始化列表和页数
    this.dataList = []
    this.current = 1
    this.getOrderList(this.current)
  },
  onReady() {
    // 动态获取剩余的高度
    var that = this
    uni.getSystemInfo({
      success: function (res) {
        that._data.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
        let titleH = uni.createSelectorQuery().select('.sv') //想要获取高度的元素名（class/id）
        titleH
          .boundingClientRect((data) => {
            let pH = that._data.pH
            that._data.navHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
          })
          .exec()
      }
    })
  },
  methods: {
    // 页面数据
    async getOrderList(current) {
      let params = {
        type: 1,
        roleId: this.vuex_user.id,
        result: this.result,
        currentPage: current,
        size: this.size
      }

      let res = await this.$u.api.getPermissionPageData(params)
      let data = JSON.parse(JSON.stringify(res.data))

      // 无数据 nomore 页数减回来
      if (data.length == 0) {
        this.loadStatus = 'nomore'
        this.current = --this.current
        return
      }

      if (this.dataList.length == 0) {
        // 赋值
        this.dataList = res.data
      } else {
        // 下拉追加
        data.forEach((item) => {
          this.dataList.push(item)
        })
      }
      this.loadStatus = 'loadmore'
    },
    async change() {
      // 初始化列表和页数
      this.dataList = []
      this.current = 1
      this.getOrderList(this.current)
    },
    reachBottom() {
      // 加这个判断 为了防止重复下拉
      if (this.loadStatus != 'loading') {
        // 下拉增加页数
        this.current = ++this.current

        this.loadStatus = 'loading'
        setTimeout(() => {
          this.getOrderList(this.current)
        }, 1200)
      }
    },
    closeDropdown() {
      this.$refs.uDropdown.close()
    },
    /**
     * 删除
     * @param {Object} index1
     * @param {Object} index
     */
    click(index, index1) {
      let id = this.dataList[index].id
      let name = this.dataList[index].createTime

      this.$refs['Confirm'].open({
        title: '提示',
        content: `是否确定删除 [${name}] 的申请记录?`,
        callback: (action) => {
          if (action == 'sumbit') {
            // 删除记录
            this.$u.api.delPermissionRecord(id).then((res) => {
              this.$u.toast('删除成功')

              // 重新查询
              this.change()
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  margin: 20rpx 40rpx;
  font-size: 25rpx;

  .color-blue {
    color: $u-type-primary;
    margin-right: auto;
    justify-content: flex-start;
  }

  .color-green {
    color: $u-type-success;
    justify-content: center;
  }

  .color-red {
    color: $u-type-error;
    margin-left: auto;
    justify-content: flex-end;
  }
}

.order {
  width: 710rpx;
  background-color: #ffffff;
  margin: 0 20rpx 0 20rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;
	display: flex;

  .order-item {
    display: flex;
    justify-content: space-between;

    .left {
      .title {
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        font-size: 35rpx;
        line-height: 45rpx;
      }
    }

    .content {
      .type {
        margin: 6rpx 0;
        font-size: 30rpx;
        color: $u-type-primary;
      }

      .other-type {
        margin: 6rpx 0;
        font-size: 24rpx;
        color: $u-tips-color;
      }

      .gray-type {
        margin: 6rpx 0;
        font-size: 30rpx;
        color: #8799a3;
      }

      .green-type {
        margin: 6rpx 0;
        font-size: 30rpx;
        color: $u-type-success;
      }

      .red-type {
        margin: 6rpx 0;
        font-size: 30rpx;
        color: $u-type-error;
      }
    }
  }
}

.search-left {
  margin: 0 auto;

  .search-width {
    width: 550rpx;
  }
}

.swipe-right-item-red {
  margin: 20rpx auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  width: 150rpx;
  background-color: #dd524d;
  color: #ffffff;
  padding: 20rpx;
  font-size: 35rpx;
}
</style>
